<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>模块化1</title>
    <script src="angularjs/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="ctrl">

    <h1>{{user.name}}</h1>
    <p>{{user.site}}</p>
    <hr/>
    <h1>{{user2.name}}</h1>
    <p>{{user2.site}}</p>
    <hr/>
    <p>{{username}}</p>
    <hr/>
    <p>{{usersite}}</p>
</div>

<script>
    var app = angular.module("myapp",[]);
    app.controller("ctrl", function ($scope,myuser,myservice,username,usersite) {
        $scope.username = username;
        $scope.usersite = usersite;

        $scope.user = myuser;

        $scope.user2 = myservice;
    })

//    向模块中注入元素
    app.factory("myuser",function(){
        return{
            name : "dora",
            site : "http://www.doramart.com"
        }
    })

    app.service("myservice", function () {
        this.name = "doramart";
        this.site = "http://www.doramart.com"
    })

//    可替换
    app.value("name","doramart");
    app.value("username","doramart1");

//    不可替换
    app.constant("usersite","forjs.org");
    app.constant("usersite","http://www.ddd");
</script>
</body>
</html>